<template>
  <div class="refund-info">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="返回"
      sub-title="退货详情"
      @back="back"
    />
    <div class="pro-info">
      <h1>退货商品</h1>
      <a-table
        :columns="pro_columns"
        :data-source="pro_data"
        bordered
        ellipsis
        rowKey="proId"
        style="margin-top: 10px"
        size="small"
        :pagination="false"
      >
        <template #proIcon="{ record }">
          <a-image :width="72" :src="record.proIcon" />
        </template>
        <template #proPrice="{ record }">
          <p>{{ "售价:￥" + record.proPrice }}</p>
          <p>{{ "货号:" + record.proId }}</p>
        </template>
        <template #proTotalPrice="{ record }">
          <p>{{ "￥" + record.proTotalPrice }}</p>
        </template>
      </a-table>
      <div class="total">
        <p  v-show="info.money!=undefined">
          申请退款金额:<span>{{ '￥'+info.money }}</span>
        </p>
      </div>
    </div>
    <div class="reund-case">
      <h1>退货原因</h1>
      <a-row
        style="
          border-left: 1px solid #dcdfe6;
          border-top: 1px solid #dcdfe6;
          margin-top: 15px;
        "
      >
        <a-col :span="5" class="lable"> 服务单号 </a-col>
        <a-col :span="19" class="context"> {{ info.refId }} </a-col>
      </a-row>
      <a-row style="border-left: 1px solid #dcdfe6">
        <a-col :span="5" class="lable"> 申请状态 </a-col>
        <a-col :span="19" class="context">
          {{
            info.refState == 1
              ? "待处理"
              : info.refState == 2
              ? "退货中"
              : info.refState == 3
              ? "已完成"
              : "已拒绝"
          }}
        </a-col>
      </a-row>
      <a-row style="border-left: 1px solid #dcdfe6">
        <a-col :span="5" class="lable"> 申请时间</a-col>
        <a-col :span="19" class="context"> {{ info.refAppliyTime }} </a-col>
      </a-row>
      <a-row style="border-left: 1px solid #dcdfe6">
        <a-col :span="5" class="lable"> 用户账号 </a-col>
        <a-col :span="19" class="context">{{ info.cusId }} </a-col>
      </a-row>
      <a-row style="border-left: 1px solid #dcdfe6">
        <a-col :span="5" class="lable"> 联系人 </a-col>
        <a-col :span="19" class="context">{{ info.cusName }}</a-col>
      </a-row>
      <a-row style="border-left: 1px solid #dcdfe6">
        <a-col :span="5" class="lable"> 联系电话 </a-col>
        <a-col :span="19" class="context"> {{ info.cusTel }} </a-col>
      </a-row>
      <a-row style="border-left: 1px solid #dcdfe6">
        <a-col :span="5" class="lable"> 退货原因 </a-col>
        <a-col :span="19" class="context"> {{ info.refReason }} </a-col>
      </a-row>
      <a-row style="border-left: 1px solid #dcdfe6">
        <a-col :span="5" class="lable"> 问题描述 </a-col>
        <a-col :span="19" class="context">{{ info.refDes }}</a-col>
      </a-row>
      <a-row style="border-left: 1px solid #dcdfe6">
        <a-col :span="5" class="lable"> 凭证图片 </a-col>
        <a-col :span="19" class="context">
          <a-space>
            <a-image
              v-for="(item, index) in info.refImages"
              :key="index"
              :width="128"
              :src="item"
            />
          </a-space>
        </a-col>
      </a-row>
    </div>

    <div class="operation">
      <a-space>
        <a-button type="primary" @click="showConfirm(2)" v-if="info.refState == 1">审核通过</a-button>
        <a-button type="danger" @click="showConfirm(4)"  v-if="info.refState == 1">审核未通过</a-button>
        <a-button type="primary" @click="showConfirm(3)" v-if="info.refState == 2">服务完成</a-button>
      </a-space>
    </div>

    <div class="title">操作信息</div>
    <div class="context">
      <a-table
        :columns="opera_columns"
        :data-source="operation"
        bordered
        ellipsis
        rowKey="operationId"
        style="margin-top: 10px"
        size="small"
        :pagination="false"
      >
      </a-table>
    </div>
    <a-modal v-model:visible="visible" title="操作理由" @ok="handleOk">

      <a-textarea
      v-model:value="res"
      placeholder="请输入操作原因"
      :auto-size="{ minRows: 5 }"
    />
    </a-modal>
  </div>
</template>

<script>

import { message } from 'ant-design-vue';
const pro_columns = [
  {
    title: "图片",
    key: "proIcon",
    dataIndex: "proIcon",
    align: "center",
    slots: { customRender: "proIcon" },
  },
  {
    title: "商品名",
    dataIndex: "proName",
    key: "proName",
    align: "center",
  },
  {
    title: "价格/货号",
    key: "proPrice",
    align: "center",
    slots: { customRender: "proPrice" },
  },
  {
    title: "数量",
    key: "proCount",
    dataIndex: "proCount",
    align: "center",
    slots: { customRender: "proCount" },
  },
  {
    title: "总价",
    key: "proTotalPrice",
    align: "center",
    slots: { customRender: "proTotalPrice" },
  },
];
const opera_columns = [
  {
    title: "操作人ID",
    key: "adminId",
    dataIndex: "adminId",
    align: "center",
  },
  {
    title: "时间",
    key: "operationTime",
    dataIndex: "operationTime",
    align: "center",
  },
  {
    title: "操作描述",
    key: "operationDes",
    dataIndex: "operationDes",
    align: "center",
  },
];

const pro_data = [];
export default {
  data() {
    return {
      opera_columns,
      pro_data,
      pro_columns,
      refId: "",
      info: "",
      operation: [],
      visible: false,//提示框默认不显示
      res:'',//操作理由
      resI:'',//操作状态
    };
  },
  mounted() {
    this.refId = this.$route.query.refId;
    this.init()
   
  },

  methods: {
    back() {
      this.$router.go(-1);
    },
    init(){
       this.$axios
      .get("/admin/refund/getRefundInfo?rId=" + this.refId)
      .then((res) => {
        this.info = res.data.data;
        this.info.refImages = JSON.parse(this.info.refImages);
        this.pro_data.push(JSON.parse(res.data.data.proId));
      })
      .catch((err) => {
        console.error(err);
      });

    this.$axios
      .get("/admin/refund/getOpLog?rId=" + this.refId)
      .then((res) => {
        this.operation = res.data.data;
        console.log(this.operation);
      })
      .catch((err) => {
        console.error(err);
      });
    },
    showConfirm(i) {
      this.visible=true
      if(i==2){
        this.resI=i
      }
      if(i==3){
        this.resI=i
      }
      if(i==4){
        this.resI=i
      }
      
    },

    handleOk(){
      this.$axios.get('/admin/refund/chgRefundState?rId='+this.refId+'&state='+this.resI+'&des='+this.res)
      .then(res => {
        res.data.code==2000?(message.success('操作成功'),this.init()):message.error('操作失败');
        
      })
      .catch(err => {
        console.error(err); 
      })
      this.visible = false
    }
  },
};
</script>
<style lang="less" scoped>
.refund-info {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.pro-info {
  padding: 20px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
  margin-top: 20px;
}
.refund-info .total {
  text-align: right;
  font-size: 16px;
  color: #303133;
  margin-top: 20px;
  font-weight: 800;
}
.refund-info .total p span {
  color: #f56c6c;
  margin-left: 20px;
}
.refund-info .reund-case {
  padding: 20px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
  margin-top: 20px;
}
.lable {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
}
.context {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
}
.operation {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
